<template>
     <div id="myWallet">
     <!--头部-->
         <!--后退-->
        <img class="back" src="../../../assets/homepage/back.png" alt="" onclick="history.go(-1)">
        <div class="mineInfo"> 
            <section class="myHead">
                 <div class="myHeadImg"><img :src="myUserData.headPortrait" alt=""></div>
                 <div class="myHIP">
                    <p>{{myUserData.nickName}}</p>
                    <p>{{myUserData.phoneNumber}}</p>
                </div>
            </section>
              <!--余额 信用度 积分-->
            <div class="balance">
                <section>
                    <p>余额</p>
                    <span>{{myUserData.wallet.balance}}元</span>
                </section>
                <section>
                    <p>信用度</p>
                    <span>{{myUserData.creditDegree}}分</span>
                </section>
                <section>
                    <p>积分</p>
                    <span>{{myUserData.wallet.integral}}积分</span>
                </section>  
            </div>
         </div>
         <!--提现 充值-->
         <div class="cash">
             <section>
                 <router-link to="/myWalletDrawals" style="text-decoration:none;">
                    <p><img style="width:3rem;height:3rem;"src="../../../assets/me/withdrawCash.png" alt=""></p>
                    <p>提现</p>
                </router-link>
             </section>
             <section>
                 <router-link to="/myWalletRecharge"  style="text-decoration:none;">
                    <p><img style="width:3rem;height:3rem;"src="../../../assets/me/iphoneRecharge.png" alt=""></p>
                    <p>充值</p> 
                </router-link>
             </section>
         </div>
         <!--重置支付密码-->
         <router-link :to="{path:'/resetPsw/'+rouId}" style="text-decoration:none;">
             <div class="resetPsw">
                  <p>重置支付密码</p>
                  <img style="width:0.5rem;height:1rem;margin-top:0.75rem;"src="../../../assets/me/next-w.png" alt="">
             </div>
         </router-link>
     </div>
</template>
<script>
   export default {
  data () {
    return {
       rouId:undefined,
       myUserData:{
           headPortrait:undefined,
           nickName:undefined,
           identification:undefined,
           phoneNumber:undefined,
           wallet:{
               creditDegree:undefined,
           }
       },
    }
  },
   mounted(){
       this.rouId = this.$route.params.id
  },
  created(){
      this.getmyWallet()
  },
  methods:{
      getmyWallet(){
           this.$api.getmyMessage(this.$route.params.id).then((res)=>{
              if(res.code == '000000'){
                  console.log('POOOOOOOOOOO')
                  this.myUserData = res.data
                   console.log(this.myUserData)
              }
          })
      },
     
  }
}
</script>
<style lang="">
#myWallet{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../../assets/me/walletbg.png);   
}
#myWallet .back{
    height:1.1rem;
    width:0.6rem;
    margin:1rem 0.6rem;
}
#myWallet .mineInfo{
    background-size:100% 100%;
    background-image:url(../../../assets/me/myWalletCard.png);   
}
#myWallet .mineInfo{
    padding:1rem;
}
#myWallet .myHeadImg{
    width:100%;
    text-align:center;
}
#myWallet .myHeadImg >img {
    height:10vh;
    border-radius:50%;
}
#myWallet .myHIP{
    width:100%;
    font-size:0.9rem;
    color:#29a193;
    line-height:1.8rem;
    text-align:center;
}
#myWallet .balance{
    width:100%;
    display:flex;
    justify-content:space-between;
    padding:0.5rem 0.75rem;
    font-size:0.8rem;
    line-height:1.5rem;
    
}
#myWallet .balance section{
    text-align:center;
}
#myWallet .balance section > p{
    color:#888888;
    font-size:0.9rem;
}
#myWallet .balance section > span{
    letter-spacing:0.05rem;
}
#myWallet .cash{
    background:#fff;
    width:100%;
    padding:0.25rem 4rem;
    height:5rem;
    display:flex;
    margin:0.75rem 0px;
    line-height:1.25rem;
    justify-content:space-between;
}
#myWallet .cash section{
     text-align:center;
}
#myWallet .resetPsw{
    background:#fff;
    width:100%;
    padding:0px 0.75rem;
    margin:0.75rem 0px;
    height:2.5rem;
    line-height:2.5rem;
    display:flex;
    justify-content:space-between;
}
</style>